<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<input class="search-input" placeholder="输入领域名称" v-model="searchKeyword" @input="handleSearch" />
			<image class="search-icon" src="@/static/search.png" />
		</view>
		<view class="content">
			<!-- 左侧分类 -->
			<scroll-view class="left-nav" scroll-y ref="leftNav">
				<view style="background: #f8f8f8;">检查类型</view>
				<view v-for="item in categories" :key="item.id" class="nav-item"
					:class="{ active: activeCategory === item.id }" @click="switchCategory(item.id)">
					{{ item.name }}
				</view>
			</scroll-view>
			<!-- 右侧内容 -->
			<scroll-view class="right-content" scroll-y ref="rightNav">
				<view>领域</view>
				<view v-for="field in filteredFields" :key="field.id" class="field-item">
					{{ field.name }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeCategory: 1,
				searchKeyword: '',
				categories: [{
					id: 1,
					name: '公益诉讼检察'
				}, {
					id: 2,
					name: '其他'
				}],
				allFields: [{
						id: 1,
						categoryId: 1,
						name: '生态环境和资源保护领域'
					},
					{
						id: 2,
						categoryId: 1,
						name: '食品药品安全领域'
					},
					{
						id: 3,
						categoryId: 1,
						name: '国有财产保护领域'
					},
					// 其他领域数据...
				]
			}
		},
		computed: {
			filteredFields() {
				return this.allFields.filter(field =>
					field.categoryId === this.activeCategory &&
					field.name.includes(this.searchKeyword)
				)
			}
		},
		methods: {
			switchCategory(categoryId) {
				this.activeCategory = categoryId
				this.searchKeyword = '' // 切换分类时清空搜索
			},
			handleSearch(e) {
				this.searchKeyword = e.detail.value;
				const firstMatchedField = this.filteredFields[0];
				if (firstMatchedField) {
					const targetCategory = this.categories.find(category => category.id === firstMatchedField.categoryId);
					if (targetCategory) {
						const leftNav = this.$refs.leftNav;
						const targetIndex = this.categories.indexOf(targetCategory);
						const itemHeight = 60; // 假设每个分类项的高度为60px，根据实际情况调整
						leftNav.scrollTop = targetIndex * itemHeight;
						this.activeCategory = targetCategory.id;
					}
					const rightNav = this.$refs.rightNav;
					rightNav.scrollTop = 0;
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background: #ffffff;
	}

	.search-box {
		position: relative;
		margin: 20rpx 30rpx;

		.search-input {
			height: 70rpx;
			padding: 0 80rpx 0 30rpx;
			background: #f5f5f5;
			border-radius: 40rpx;
		}

		.search-icon {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.content {
		display: flex;
		height: calc(100vh - 300rpx);
	}

	.left-nav {
		width: 240rpx;
		background: #f8f8f8;
		text-align: center;

		.nav-item {
			padding: 30rpx;
			font-size: 28rpx;

			&.active {
				color: #7b4dff;
				background: #ffffff;
				font-weight: bold;
			}
		}
	}

	.right-content {
		flex: 1;
		padding: 0 30rpx;
		text-align: center;

		.field-item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;
			font-size: 28rpx;
		}
	}
</style>